<template>
  <div class="parent">
    祖组件 --- {{name}}---{{price}}
    <Child :car="car"></Child>
  </div>
</template>

<script>
import {reactive,toRefs,provide} from 'vue'
import Child from './components/Child.vue'
export default {
  name:'Parent',
  components:{Child},
  setup(){
    let car = reactive({
      name:'benchi',
      price:'40w'
    })
    // 向后代传递数据
    provide('car',car)
    return {
      car,
      ...toRefs(car)
    }
  }
}
</script>

<style>
  .parent{ 
    background-color: gray;
    padding: 10px;
  }
</style>